<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌列表</title>
    <script th:src="@{/static/js/vue.js}"></script>
    <script th:src="@{/static/js/axios.min.js}"></script>
    <script th:src="@{/static/js/index.js}"></script>
    <link rel="stylesheet" th:href="@{/static/css/index.css}">
</head>
<body>
<div id="app">
    <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="模板名称">
            <el-input v-model="searchMap.name" placeholder="模板名称"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="fetchData()">查询</el-button>
            <el-button type="primary" @click="formVisible=true,pojo={}">新增</el-button>
        </el-form-item>
    </el-form>

    <el-table
            :data="templateList"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="ID"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="模板名称"
                width="180">
        </el-table-column>
        <el-table-column
                prop="specNum"
                label="规格数量">
        </el-table-column>
        <el-table-column
                prop="paraNum"
                label="参数数量">
        </el-table-column>
        <el-table-column label="设置">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="specList(scope.row.id)">规格列表</el-button>
                <el-button
                        size="mini"
                        @click="paraList(scope.row.id)">参数列表</el-button>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.row.id)">修改</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            @size-change="fetchData"
            @current-change="fetchData"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <el-dialog title="编辑" :visible.sync="formVisible" >
        <el-form label-width="100px">
            <el-form-item label="模板名称">
                <el-input  placeholder="模板名称" v-model="pojo.name"></el-input>
            </el-form-item>
            <el-form-item label="规格数量">
                <el-input placeholder="规格数量" v-model="pojo.specNum"></el-input>
            </el-form-item>
            <el-form-item label="参数数量">
                <el-input placeholder="参数数量" v-model="pojo.paraNum"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="save()">保存</el-button>
                <el-button @click="formVisible = false">关闭</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            templateList:[],
            currentPage:1,
            size:10,
            total:0,
            searchMap:{},
            formVisible:false,
            pojo:{},
            specNum:0,
            paraNum:0

        },
        methods:{
            //查询
            fetchData(){
                axios.post(`/template/findPage?pageNum=${this.currentPage}&pageSize=${this.size}`,this.searchMap).then(res=>{
                    //总的list集合
                    this.templateList=res.data.rows
                    //总的记录数
                    this.total=res.data.total
                })
            },
            //根据编号查询
            handleEdit(id){
                //显示窗口
                this.formVisible=true
                axios.get(`/template/findById?id=${id}`).then(res=>{
                    //回显
                    console.log(res.data);
                    this.pojo=res.data
                    this.pojo.id=id

                    //alert(this.pojo.id)
                })
            },
            //新增和修改
            save(){
                var url;
                if(this.pojo.id==null){
                    //新增
                    url=`/template/add`
                } else {
                    //修改
                    url=`/template/update`
                }
                alert(this.pojo.id)
                axios.post(url,this.pojo).then(res=>{
                    //关闭窗口
                    this.formVisible=false
                    //刷新列表
                    this.fetchData()
                })
            },
            //删除
            handleDelete(id){
                this.$confirm('确定要删除此纪录吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //删除
                    axios.get(`/template/delete?id=${id}`).then(res=>{
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        //刷新列表
                        this.fetchData()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            specList(id){
                window.location.href="/tSpec/specIndex?templateId="+id;
            },
            paraList(id){
                window.location.href="/tpPara/paraIndex?templateId="+id;
            }
        },

        created(){//页面渲染之前调用
            //品牌列表
            this.fetchData()
        }
    })
</script>
</html>